<template>
  <GlobalBG title="视频调阅" :showBack="true">
    <view class="videolist-layout">
      <scroll-view scroll-x>
        <view class="tab-content" v-if="showSence">
          <view
            class="tab-item"
            @click="selectTab('all')"
            :class="{ active: active == 'all' }"
            >全部</view
          >
          <view
            class="tab-item"
            @click="selectTab('sys')"
            :class="{ active: active == 'sys' }"
            >系统通知</view
          >
          <view
            class="tab-item"
            @click="selectTab('event')"
            :class="{ active: active == 'event' }"
            >事件通知</view
          >
          <view
            class="tab-item"
            @click="selectTab('work')"
            :class="{ active: active == 'work' }"
            >工作消息</view
          >
          <view
            class="tab-item"
            @click="selectTab('work')"
            :class="{ active: active == 'work' }"
            >工作消息1</view
          >
          <view
            class="tab-item"
            @click="selectTab('work')"
            :class="{ active: active == 'work' }"
            >工作消息1</view
          >
        </view>
      </scroll-view>

      <view class="videolist-container" :class="{ showSence: showSence }">
        <scroll-view
          scroll-y
          :refresher-enabled="true"
          :refresher-triggered="refreshing"
          @refresherrefresh="onRefresh"
          @scrolltolower="onReachBottom"
          class="scroll-view"
        >
          <!-- 列表内容 -->
          <view
            v-for="(item, index) in list"
            :key="index"
            @click="gotoRoute(item)"
            class="item"
          >
            <image
              class="pointImg"
              src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
            >
            </image>
            <view class="name"> 新开里西门进口 </view>
            <view class="lineStatus"> <view class="circle"></view>在线 </view>
            <view class="types">
              <view class="tip">出入口</view>
            </view>
          </view>

          <!-- 加载更多提示 -->
          <view v-if="loading" class="loading-text">加载中...</view>
          <view v-if="noMore" class="no-more-text">没有更多了</view>
          <view class="empty-view" v-if="list.length === 0">
            <image class="img" src="/static/images/xgjd/empty.png"></image>
            <text class="text">查询无结果</text>
          </view>
        </scroll-view>
      </view>
    </view>
  </GlobalBG>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import api from '@/api/modules/videoAccess.ts';

let list = ref([]);
// 是否正在刷新
const refreshing = ref(false);
// 是否正在加载
const loading = ref(false);
// 是否没有更多数据
const noMore = ref(false);

// 下拉刷新
const onRefresh = () => {
  refreshing.value = true;

  // 模拟异步请求
  setTimeout(() => {
    list.value = Array.from(
      {
        length: 20,
      },
      (_, i) => `刷新项目 ${i + 1}`
    );
    refreshing.value = false;
    noMore.value = false;
    uni.showToast({
      title: '刷新成功',
      icon: 'success',
    });
  }, 1000);
};

// 上拉加载更多
const onReachBottom = () => {
  if (loading.value || noMore.value) return;

  loading.value = true;

  // 模拟异步请求
  setTimeout(() => {
    const newItems = Array.from(
      {
        length: 10,
      },
      (_, i) => `新增项目 ${list.value.length + i + 1}`
    );
    list.value = [...list.value, ...newItems];
    loading.value = false;

    // 模拟没有更多数据的情况
    if (list.value.length >= 50) {
      noMore.value = true;
    }
  }, 1000);
};

let active = ref('all');
const selectTab = (type) => {
  active.value = type;
};
let currentIndex = ref();
const jumpDetail = (index) => {
  if (currentIndex.value === index) {
    currentIndex.value = '';
  } else {
    currentIndex.value = index;
  }
};

const gotoRoute = (item) => {
  uni.navigateTo({
    url: '/pages/video/component/videoplay',
  });
};
//  获取接口数据
const fetchList = async () => {
  try {
    let data = {};
    const res = await api.getDevicecombox(data);
    console.log('获取列表数据:', res);
  } catch (error) {
    console.error('获取列表数据', error);
  }
};
let showSence = ref(false);
onLoad((options) => {
  if (options.type == 'sence') {
    showSence.value = true;
    // fetchList();
  }
});
</script>

<style lang="scss">
.videolist-layout {
  width: 100%;
  height: 100%;
  padding: 0 28rpx;
  display: flex;
  flex-direction: column;

  .uni-scroll-view-content {
    display: flex !important;
    align-items: top !important;
    justify-content: space-around !important;
    flex-wrap: wrap !important;
  }
}

.tab-content {
  min-width: 100%;
  height: 54rpx;
  // display: flex;
  // align-items: center;
  // justify-content: space-around;
  margin: 38rpx 0;
  margin-bottom: 0;
  overflow-x: auto;
  white-space: nowrap;
  overflow-y: hidden;

  .tab-item {
    display: inline-block;
    vertical-align: middle;
    width: 154rpx;
    height: 54rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(70, 102, 149, 0.15);
    border-radius: 25rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 27rpx;
    color: #333333;
    line-height: 54rpx;
    text-align: center;
    margin-right: 20rpx;

    &.active {
      color: #ffffff;
      background: #2263bf;
    }
  }
}

.videolist-container {
  // height: calc(100% - 180rpx);
  flex: 1;
  margin-top: 38rpx;

  &.showSence {
    flex: none;
    height: calc(100% - 180rpx);
  }

  // display: flex;
  // flex-direction: column;
  // align-items: top;
  // flex-wrap: wrap;
}

.scroll-view {
  height: 100%;
  padding: 0 8rpx;

  // padding: 0 38rpx;
  // box-sizing: border-box;
  .uni-scroll-view-content {
    display: flex !important;
    align-items: top !important;
    justify-content: space-around !important;
    flex-wrap: wrap !important;
  }
}

.item {
  width: 337rpx;
  height: 375rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 15.38rpx 15.38rpx 25rpx 15.38rpx;

  .pointImg {
    width: 100%;
    height: 192rpx;
    border-radius: 12rpx;
  }

  .name {
    margin-top: 17rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 23rpx;
    color: #333333;
    line-height: 33rpx;
  }

  .lineStatus {
    margin-top: 10rpx;
    display: flex;
    align-items: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 23rpx;
    color: #39aa92;
    line-height: 33rpx;

    .circle {
      width: 17rpx;
      height: 17rpx;
      border-radius: 50%;
      background: #39aa92;
      margin-right: 10rpx;
    }
  }

  .types {
    margin-top: 10rpx;
    display: flex;
    align-items: center;

    .tip {
      min-width: 81rpx;
      height: 38rpx;
      background: #d2f0ff;
      border-radius: 8rpx;
      text-align: center;
      padding: 0 17rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 23rpx;
      color: #45aff7;
      line-height: 38rpx;
    }
  }
}

.loading-text,
.no-more-text {
  text-align: center;
  padding: 10px;
  color: #999;
}

.empty-view {
  width: 315rpx;
  height: 242rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .img {
    width: 315rpx;
    height: 242rpx;
  }

  .text {
    display: block;
    width: 100%;
    left: 0;
    bottom: 20rpx;
    position: absolute;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 27rpx;
    color: #666666;
    line-height: 38rpx;
    text-align: center;
  }
}
</style>
